<template>
	<div style='margin-bottom: 20rpx;'>
		<div>
			<div class="clouldGoods" @click="handleDetails">
				<div class="goods_code">
					商品编号：{{data.goodsNumber}}
				</div>
				<div class="_box">
					<div class="clouldGoodsItem">
						<div class="imageMain">
							<image :src="data.imageUrl" style="width:100%;height: 100%;" alt="" />
						</div>
						<div class="left-container">
							<div class='headerPart'>
								<div class="title"><span class="pinkage">(包邮)</span>{{data.goodsName}}</div>
								<div class="orderTime">
									下单时间：{{data.createTime}}
								</div>
							</div>
							<div class="price">
								<view class="">
									<span
										style="font-weight: 400;font-size: 24rpx;color: #151822;">{{data.walletType == 1 ?'多多券':'通贝积分'}}
									</span> {{data.price}}
								</view>
								<text v-if="data.state==2" class="liuzhuan">
									流转中...
								</text>
							</div>
						</div>
					</div>
					<div class="btnGroup" v-if="data.state != 3">
						<!-- <div v-show="data.state==1 && data.walletType==1" class="btn1"
							@click.stop="handleSellGoods('zhuandou')">
							转通贝积分</div> -->
						<div v-if="data.state==1" class="btn2" @click.stop="handleSellGoods('2')">流转</div>
						<div class="btn3" v-if="data.state!=2" @click.stop="handleSellGoods('tihuo')">提货</div>
					</div>
				</div>

			</div>
		</div>
		<div v-if="false">
			<div class="clouldGoods" style="flex-direction: row;">
				<div class="imageMain">
					<image :src="data.imageUrl" style="width:100%;height: 100%;" alt="" />
				</div>
				<div class="left-container">
					<div class="title">{{data.goodsName}}</div>
					<div class="orderTime" v-if='status==2'>
						下单时间：{{data.createTime}}
					</div>
					<div class="orderTime" v-if='status==3'>
						售出时间：{{data.createTime}}
					</div>
					<div class="price">
						{{data.price}}
					</div>
				</div>
				<!-- <div class="btnGroup" v-if='status!=3'>
					<div class='downUp' @click.stop="handleOffShelf">下架</div>
				</div> -->
			</div>
		</div>
	</div>

</template>

<script>
	import _ from 'lodash';
	import {
		sellGoods,
		offShelf
	} from "../../api/api.js"
	export default {
		name: 'cloudGoodsItem',
		props: {
			status: {
				type: Number,
				default: '', //状态1未上架2已上架3已出售
			},
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			}
		},


		methods: {

			handleSellGoods(type) {
				console.log(type)
				// debugger
				if (type == 'zhuandou') {
					this.$emit('payFun', this.$props.data.id)
					return
				}
				if (type == 'tihuo') {
					uni.navigateTo({
						url: "/pages/afterService/index?id=" + this.$props.data.id + "&type=" + type
					})
					return
				}
				// 上架商品
				sellGoods({
					id: this.$props.data.id
				}).then(res => {
					uni.showToast({
						title: '流转成功',
						icon: 'none',
						duration: 2000,
						success: () => {
							this.$emit('callBack', 'upLoad')
						}
					})
				})


			},
			handleDetails() {
				uni.navigateTo({
					url: "/pages/cloudStore/orderDetails?id=" + this.$props.data.id
				})
			},
			handleOffShelf() {
				let that = this
				// 下架商品
				offShelf({
					id: this.$props.data.id
				}).then(res => {
					uni.showToast({
						title: '下架成功',
						icon: 'none',
						duration: 2000,
						success: function() {
							that.$emit('callBack', 'upLoad')
						}
					})
				})
			},
			handleAfterService() {
				uni.navigateTo({
					url: "/pages/cloudStore/orderDetails?id=" + this.$props.data.id
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.clouldGoods {
		border-radius: 24rpx;
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background: #F8F8F8;
		position: relative;

	}

	.goods_code {
		font-weight: 400;
		font-size: 24rpx;
		color: #151822;
		margin-bottom: 12rpx;
	}

	._box {
		background: #FFFFFF;
		border-radius: 16px;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.clouldGoodsItem {
		width: 100%;
		position: relative;
		display: flex;
	}

	.imageMain {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.btnGroup {
		width: 100%;
		// height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;

		.btn1,
		.btn2,
		.btn3 {
			font-weight: 600;
			font-size: 28rpx;
			color: #151822;
			margin-top: 20rpx;
		}

		.btn1 {
			padding: 8rpx 20rpx;
			color: #333333;
		}

		.btn2,
		.btn3 {
			padding: 8rpx 36rpx;
		}

		.btn1 {
			background: #F3E24F;
			box-shadow: inset 4rpx 8rpx 8rpx 0rpx rgba(255,255,255,0.5), inset -4rpx -8rpx 8rpx 0rpx #C2AE00;
			border-radius: 30rpx;
		}

		.btn2 {
			margin: 0 20rpx;
			background: #FFE60E;
			box-shadow: inset 4rpx 8rpx 8rpx 0rpx rgba(255,255,255,0.4), inset -4rpx -6rpx 8rpx 0rpx #D5B646;
			border-radius: 30rpx;
		}

		.btn3 {
			background: #E6FF6A;
			box-shadow: inset 4rpx 8rpx 8rpx 0rpx rgba(255,255,255,0.4), inset -4rpx -6rpx 8rpx 0rpx #CDE553;
			border-radius: 30rpx;
		}
	}


	.left-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 16rpx;

		.headerPart {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
		}

		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #0F1724;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 设置显示的行数 */
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 40rpx;
		}
		
		.pinkage {
			display: inline-block;
			padding: 3rpx 8rpx;
			background: #EB3B27;
			border-radius: 6rpx;
			color: #ffffff;
			margin-right: 6rpx;
		}

		.orderTime {
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(21, 24, 34, 0.8);
		}

		.price {
			font-weight: bold;
			font-size: 36rpx;
			color: #151822;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items:center;
			// &:before {
			// 	content: '¥';
			// 	// width: 22rpx;
			// 	// height: 22rpx;
			// 	// margin-right: 4rpx;
			// 	// background: url("@/static/happyBin.png") no-repeat;
			// 	// background-size: 100% 100%;
			// 	// display: inline-block;
			// 	font-size: 24rpx;
			// }
		}

		.liuzhuan {
			font-weight: 400;
			font-size: 28rpx;
			color: #EB3B27;
		}
	}

	.downUp {
		width: 128rpx;
		height: 60rpx;
		background: url('../../static/market/btn2.png') no-repeat 100%;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 28rpx;
		color: var(--tm-themeColor-text1);
	}

	.saleOver {
		width: 128rpx;
		height: 60rpx;
		background: url('../../static/market/btn1.png') no-repeat 100%;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 28rpx;
		color: var(--tm-themeColor-text1);
	}

	.tihuo {
		width: 128rpx;
		height: 60rpx;
		background: url('../../static/market/btn3.png') no-repeat 100%;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 28rpx;
		color: var(--tm-themeColor-text1);
	}
</style>